<template>
    <div>
        <h1>具名插槽</h1>
        <MyTable :data="stuList">
            <MyRow column="name" title="姓名"></MyRow>
            <MyRow column="age" title="年龄"></MyRow>
        </MyTable>
    </div>
    <hr />
    <MyTable :data="goodsList">
        <MyRow column="name" title="姓名"></MyRow>
        <MyRow column="sales" title="年龄"></MyRow>
        <MyRow column="profit" title="利润"></MyRow>
    </MyTable>
</template>
<script>
import MyTable  from '../../components/mytable.vue'
import MyRow from '../../components/myrow.vue'
export default {
    name: 'lesson9',
    components: {
        MyTable,MyRow
    },
    data() {
        return {
            // 学生数据集合
            stuList: [
                { name: '张三', age: 18 },
                { name: '李四', age: 19 },
                { name: '王五', age: 20 },
                { name: '赵六', age: 21 }
            ],
            // 商品、销售额、利润集合
            goodsList: [
                { name: '苹果', sales: 100, profit: 20 },
                { name: '香蕉', sales: 200, profit: 40 },
                { name: '橘子', sales: 300, profit: 60 },
                { name: '葡萄', sales: 400, profit: 80 }
            ]
        }
    }
}
</script>
